<template>
    <div class="box order-box">
        <van-tabs v-model="active" sticky swipeable animated>
            <van-tab title="全部">
                <ul v-if="orderItems.length>0" class="list-box pa-20">
                    <li class="pa-l-r-20" v-for="(item ,index) in orderItems" :key="index">
                        <router-link to="">
                            <div class="title">
                                <p>订单编号：{{item.orderNumber}}</p>
                                <span>{{item.status}}</span>
                            </div>
                            <div class="main-box">
                                <i><img :src="item.imgSrc"></i>
                                <div><h5 class="multi-line">{{item.name}}</h5></div>
                                <p>
                                    <span>¥<b>{{item.price}}</b></span>
                                    <strong>×{{item.num}}</strong>
                                </p>
                            </div>
                            <div class="total-box pa-l-r-20">
                                共{{item.num}}件商品 合计：<i>¥</i><b>{{item.num * item.price}}</b>
                            </div>
                            <div class="btn-box">
                                <button v-if="item.status === '待支付'">付款</button>
                                <button v-else-if="item.status === '待核验'">去核验</button>
                                <button v-else-if="item.status === '待收货'">确认收货</button>
                                <button v-else-if="item.status === '退款中'">退款进度</button>
                                <button v-else-if="item.status === '已完成'">再次购买</button>
                                <button v-else-if="item.status === '已关闭'">再次购买</button>
                            </div>
                        </router-link>
                    </li>
                </ul>
                <Empty v-else :msg="msg"/>
            </van-tab>
            <van-tab title="待支付">
                <ul class="list-box pa-20" >
                    <li class="pa-l-r-20" v-for="(item ,index) in orderItems" :key="index" >
                        <router-link to=""  v-if="item.status === '待支付'">
                            <div class="title">
                                <p>订单编号：{{item.orderNumber}}</p>
                                <span>{{item.status}}</span>
                            </div>
                            <div class="main-box">
                                <i><img :src="item.imgSrc"></i>
                                <div><h5 class="multi-line">{{item.name}}</h5></div>
                                <p>
                                    <span>¥<b>{{item.price}}</b></span>
                                    <strong>×{{item.num}}</strong>
                                </p>
                            </div>
                            <div class="total-box pa-l-r-20">
                                共{{item.num}}件商品 合计：<i>¥</i><b>{{item.num * item.price}}</b>
                            </div>
                            <div class="btn-box">
                                <button>付款</button>
                            </div>
                        </router-link>
                    </li>
                </ul>
              <Empty :msg="msg"/>
            </van-tab>
            <van-tab title="待发货">
                <ul class="list-box pa-20" >
                    <li class="pa-l-r-20" v-for="(item ,index) in orderItems" :key="index" >
                        <router-link to=""  v-if="item.status === '待发货'">
                            <div class="title">
                                <p>订单编号：{{item.orderNumber}}</p>
                                <span>{{item.status}}</span>
                            </div>
                            <div class="main-box">
                                <i><img :src="item.imgSrc"></i>
                                <div><h5 class="multi-line">{{item.name}}</h5></div>
                                <p>
                                    <span>¥<b>{{item.price}}</b></span>
                                    <strong>×{{item.num}}</strong>
                                </p>
                            </div>
                            <div class="total-box pa-l-r-20">
                                共{{item.num}}件商品 合计：<i>¥</i><b>{{item.num * item.price}}</b>
                            </div>

                        </router-link>
                    </li>
                </ul>
            </van-tab>
            <van-tab title="待收货/核验">
                <ul class="list-box pa-20" >
                    <li class="pa-l-r-20" v-for="(item ,index) in orderItems" :key="index" >
                        <router-link to=""  v-if="item.status === '待收货'">
                            <div class="title">
                                <p>订单编号：{{item.orderNumber}}</p>
                                <span>{{item.status}}</span>
                            </div>
                            <div class="main-box">
                                <i><img :src="item.imgSrc"></i>
                                <div><h5 class="multi-line">{{item.name}}</h5></div>
                                <p>
                                    <span>¥<b>{{item.price}}</b></span>
                                    <strong>×{{item.num}}</strong>
                                </p>
                            </div>
                            <div class="total-box pa-l-r-20">
                                共{{item.num}}件商品 合计：<i>¥</i><b>{{item.num * item.price}}</b>
                            </div>
                            <div class="btn-box">
                                <button>确认收货</button>
                            </div>
                        </router-link>
                        <router-link to=""  v-if="item.status === '待核验'">
                            <div class="title">
                                <p>订单编号：{{item.orderNumber}}</p>
                                <span>{{item.status}}</span>
                            </div>
                            <div class="main-box">
                                <i><img :src="item.imgSrc"></i>
                                <div><h5 class="multi-line">{{item.name}}</h5></div>
                                <p>
                                    <span>¥<b>{{item.price}}</b></span>
                                    <strong>×{{item.num}}</strong>
                                </p>
                            </div>
                            <div class="total-box pa-l-r-20">
                                共{{item.num}}件商品 合计：<i>¥</i><b>{{item.num * item.price}}</b>
                            </div>
                            <div class="btn-box">
                                <button>去核验</button>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </van-tab>
            <van-tab title="已完成">
                <ul class="list-box pa-20" >
                    <li class="pa-l-r-20" v-for="(item ,index) in orderItems" :key="index" >
                        <router-link to=""  v-if="item.status === '已完成'">
                            <div class="title">
                                <p>订单编号：{{item.orderNumber}}</p>
                                <span>{{item.status}}</span>
                            </div>
                            <div class="main-box">
                                <i><img :src="item.imgSrc"></i>
                                <div><h5 class="multi-line">{{item.name}}</h5></div>
                                <p>
                                    <span>¥<b>{{item.price}}</b></span>
                                    <strong>×{{item.num}}</strong>
                                </p>
                            </div>
                            <div class="total-box pa-l-r-20">
                                共{{item.num}}件商品 合计：<i>¥</i><b>{{item.num * item.price}}</b>
                            </div>
                            <div class="btn-box">
                                <button>再次购买</button>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import imgSrc from '../../../assets/temporary/index200.png'//商品图
    import Empty from '@/components/empty/empty'// 空状态
    export default {
        name: "index",
        components:{Empty},
        data(){
            return{
                active:0,//导航索引值
                orderItems:[
                    {status:'待发货',imgSrc,orderNumber:'LM5865869745',name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:'51',num:'2',},
                    {status:'待支付',imgSrc,orderNumber:'LM5865869745',name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:'51',num:'2',},
                    {status:'退款中',imgSrc,orderNumber:'LM5865869745',name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:'51',num:'2',},
                    {status:'已完成',imgSrc,orderNumber:'LM5865869745',name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:'51',num:'2',},
                    {status:'已关闭',imgSrc,orderNumber:'LM5865869745',name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:'51',num:'2',},
                    {status:'已完成',imgSrc,orderNumber:'LM5865869745',name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:'51',num:'2',},
                    {status:'待收货',imgSrc,orderNumber:'LM5865869745',name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:'51',num:'2',},
                    {status:'待核验',imgSrc,orderNumber:'LM5865869745',name:"郑州方特欢乐世界门票/大门票（电子票-出票超级...",price:'51',num:'2',}
                ],
                msg:'暂无订单！'
            }
        },
        methods:{
          aa(){
            window.console.log(this.orderItems.indexOf('待核验'))
          }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    .box{
        background-color: $gray_bg;
    }
    .list-box{
        width: 100%;
        li{
            margin-bottom: vw(20);
            background-color: #fff;
            border-radius: vw(10);
            .title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: vw(86);
                color: #666;
                span{
                    color: $green;
                }
            }
            .main-box {
                display: flex;
                justify-content: space-between;
                i{
                    min-width: vw(200);
                    max-width: vw(200);
                    border-radius: vw(4);
                    overflow: hidden;
                }
                >div{
                    flex: 1;
                }
                h5{
                    flex: 1;
                    font-size: vw(28);
                    padding: 0 vw(10);
                    font-weight: bold;
                    -webkit-line-clamp: 2;
                }
                p{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    b{
                        font-size: vw(36);
                    }
                }
            }
            .total-box {
                height: vw(81);
                line-height: vw(81);
                text-align: right;
                font-size: vw(24);
                border-bottom: 1px solid $gray_bg;
                i{
                    font-style: normal;
                    font-size: vw(28);
                }
                b{
                    font-size: vw(42);
                    font-weight: normal;
                }
            }
            .btn-box {
                display: flex;
                justify-content: flex-end;
                flex-wrap: wrap;
                button {
                    width: vw(180);
                    height: vw(60);
                    margin: vw(20);
                    border-radius: vw(30);
                    border: 1px solid $green;
                    color: $green;
                    background-color: transparent;
                }
            }
        }
    }
</style>
